import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { AblumItemWrapper } from './styled'
import { NavLink } from 'react-router-dom'

interface Iprops {
  children?: ReactNode
  albumItemData: any
}

const AlbumListItem: FC<Iprops> = (props) => {
  const { albumItemData } = props
  return (
    <AblumItemWrapper>
      <div className="top">
        <img
          className="img"
          src={albumItemData.picUrl + '?param=100y100'}
          alt={albumItemData.name}
        />
        <a href="" className="cover_img"></a>
      </div>
      <div className="bottom">
        <div className="name1">
          <NavLink to={'/discover/album?id=' + albumItemData.id}>
            {albumItemData.name}
          </NavLink>
        </div>
        <div className="name2">
          <NavLink to={'/discover/artist?id=' + albumItemData.artist.id}>
            {albumItemData.artist.name}
          </NavLink>
        </div>
      </div>
    </AblumItemWrapper>
  )
}
export default memo(AlbumListItem)
